<template>
<div>
    <div class="header">
        <div class="header-left no-select" @click="$router.push('/menu/App')">
            <img class="header-left-logo" :src="logo">
            {{title}} Portal
        </div>
        <div class="header-right no-select flex-row">
            <el-tooltip class="item" content="应用市场" placement="bottom">
                <router-link target="_blank" :to="{path:'/store'}">
                    <span class="top-bar__img iconfont store_icon cgsIcon-04"/>
                </router-link>
            </el-tooltip>
            <el-dropdown>
                <div class="user_style">
                    <!-- <img class="top-bar__img"
                        :src="userInfo.avatar"> -->
                    <img class="top-bar__img"
                        :src="require('@/assets/images/photo.png')">
                    {{userInfo.Name}}
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                            @click.native="$router.push('/account')"
                    >
                        个人账户
                    </el-dropdown-item>
                    <el-dropdown-item
                            v-if="userAuthority.MANAGE_BACKEND"
                            @click.native="$router.push('/tenant')"
                    >
                        组织管理
                    </el-dropdown-item>
                    <el-dropdown-item
                            @click.native="handleLogout"
                    >
                        安全退出
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <div class="container flex-row">
        <div :style="flexMenuStyle" class="container-menu">
            <div class="navTitle">
                <span @click="transformMenuList">{{navTitle}}</span>
                <a-tooltip placement="right">
                    <template slot="title">
                        切换至{{navUpendTitle}}
                    </template>
                    <a-button @click="transformMenuList" shape="round" icon="swap" type="link"/>
                </a-tooltip>
            </div>
            <router-link class="container-menu-item flex-row" active-class="menu-active" :key="list.id"
                v-for="list in navList"
                :to="`/menu/${list.path}`"
                v-show="list.show || tenantId === '000000'"
            >
                <div class="container-menu-hidden"/>
                <span class="menu-icon iconfont" :class="list.icon" />
                <div class="menu-title">{{list.title}}</div>
            </router-link>
        </div>
        <div class="container-flex-bt no-select" :style="flexBtStyle" @click="flexMenu">
            <span class="iconfont" :class="flexBt" />
        </div>
        <div :style="flexBtStyle" class="container-content">
            <router-view></router-view>
        </div>
    </div>
</div>
</template>
<script>
import {logout} from "@/api/user";
import {
    removeToken,
    getTenantInfo,
    getUserInfo,
    setUserInfo,
    getUserAuthority,
    removeUserAuthority,
    removeTenantInfo,
    removeConfig,
} from "@/util/auth";
  import {getAllAppList} from "@/api/authority";

export default {
  name: "menu",
  components:{
  },
  data () {
    return {
        userInfo: {},
        tenantInfo: {},
        userRole: "",
        userAuthority: {},
        tenantId: '',
        flexBt: 'cgsIcon-left',
        flexMenuStyle: null,
        flexBtStyle: null,
        showOrigin: true,
        originList:[],
        menuList: [
            {
                id: 'category',
                path: 'category',
                icon: 'cgsIcon-category',
                title: 'Category',
                show: true,
            },
            // {
            //     id: 'data',
            //     path: 'data',
            //     icon: 'cgsIcon-chakandaping',
            //     title: '大屏',
            // },
            // {
            //     id: 'TwoD',
            //     path: 'TwoD',
            //     icon: 'cgsIcon-d-',
            //     title: '2D',
            //     show: true,
            // },
            // {
            //     id: 'ThreeD',
            //     path: 'ThreeD',
            //     icon: 'cgsIcon-d-1',
            //     title: '3D',
            //     show: true,
            // },
            // {
            //     id: 'Earth',
            //     path: 'Earth',
            //     icon: 'cgsIcon-earth',
            //     title: 'Earth',
            //     show: true,
            // },
            // {
            //     id: 'Bim',
            //     path: 'Bim',
            //     icon: 'cgsIcon-bimviz',
            //     title: 'BIM',
            //     show: false,
            // },
            // {
            //     id: 'map',
            //     path: 'map',
            //     icon: 'cgsIcon-map',
            //     title: '地图管理',
            // },
            // {
            //     id: 'Workflow',
            //     path: 'Workflow',
            //     icon: 'cgsIcon-workflow',
            //     title: 'Workflow',
            //     show: true,
            // },
            {
                id: 'Static',
                path: 'Static',
                icon: 'cgsIcon--page',
                title: 'Page',
                show: true,
            },
            {
                id: 'App',
                path: 'App',
                icon: 'cgsIcon-app',
                title: 'App',
                show: true,
            },
        ]
    }
  },
  async mounted () {
      let _this = this;
    this.$ws.on('current_license', (data) => {
      if (data.Timeout){
        _this.$message.warning("License已过期，请重新申请！")
      }
    })
      this.getUserInfo();
      if(!this.visualType || this.visualType === 'organization'){
            let originList = await getAllAppList()
            if(originList && originList.length > 0 ){
                this.$router.push(`/menu/organization/${originList[0].id}`)
                this.originList = originList.map(d => {return {...d, ...{
                    icon: "cgsIcon-department",
                    path: `organization/${d.id}`,
                    title: d.categoryKey,
                    show: true
                }}});
            } else {
                this.showOrigin = false
                this.$router.push(`/menu/App`)
            }
      } else {
        this.showOrigin = false
        this.$router.push(`/menu/${this.visualType}`)
      }
  },
  methods: {
      async transformMenuList() {
          this.showOrigin = !this.showOrigin

          if(this.showOrigin) {
            let originList = await getAllAppList()
            this.originList = originList.map(d => {return {...d, ...{
                icon: "cgsIcon-department",
                path: `organization/${d.id}`,
                title: d.categoryKey,
                show: true
            }}});
            if(this.originList.length > 0){
                this.$router.push(`/menu/organization/${this.originList[0].id}`)
            }else{
                this.showOrigin = false
                this.$router.push(`/menu/App`)
            }
          } else {
            this.showOrigin = false
            this.$router.push(`/menu/App`)
          }
      },
      flexMenu() {
          if (this.flexBt === 'cgsIcon-left') {
              this.flexBt = 'cgsIcon-right'
              this.flexMenuStyle = {width: '60px'}
              this.flexBtStyle = {left: '60px'}
          } else {
              this.flexBt = 'cgsIcon-left'
              this.flexMenuStyle = {width: '240px'}
              this.flexBtStyle = {left: '240px'}
          }
      },
      getUserInfo () {
          let userInfo = getUserInfo();
          this.userInfo = JSON.parse(userInfo);
          let userAuth = getUserAuthority()
          if (!userAuth) {
              this.handleLogout()
              return
          }
          let authorities = userAuth["operatingAuthorities"];
          this.userRole = userAuth["roleName"];
          if(!authorities){
              authorities = [];
          }
          this.userAuthority = {};
          this.tenantInfo = getTenantInfo();
          for (let i = 0; i < authorities.length; i++) {
              if(authorities[i] === 'MANAGE_BACKEND'){
                  this.userAuthority[authorities[i]] = true;
                  continue;
              }
              this.userAuthority[authorities[i]] = !this.tenantInfo.account.timeout;
          }
          this.tenantId = userAuth["tenantId"];
          if(this.tenantInfo.account.timeout){
              this.$message.warning("账户已过期！")
          }
      },
      handleLogout(){
          removeToken();
          removeUserAuthority();
          removeTenantInfo();
          removeConfig();
          setUserInfo(null);
          logout().then(()=>{
              this.$router.push({path: "/login"});
          });
      },
  },
  computed: {
    version () {
      return this.$store.getters.version
    },
    title() {
        return this.$store.state.sysInfo.name
    },
    logo() {
        return this.$store.state.sysInfo.logo
    },
    navList(){
        return this.showOrigin? this.originList : this.menuList
    },
    navTitle(){
        return this.showOrigin? '组织' : '场景'
    },
    navUpendTitle(){
        return this.showOrigin? '场景' : '组织'
    },
    visualType(){
        return this.$route.params.visualType
    }
  }
}
</script>
<style scoped>
    .navTitle{
        /* color: white; */
        padding-left: 10px;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }
    .navTitle span{
        flex-shrink: 0;
        width: 60px;
        cursor: pointer;
    }
</style>
